import React, { Component } from 'react'
import Son from './Son';
export default class index extends Component {
    constructor(props) {
        super(props);
        this.userid = null;
        this.refuserpass = React.createRef();
        this.refSon1 = null;

        this.refSon2 = React.createRef();

    }

    changeUsername = () => {
        this.refs.username.value = "hehe"
    }
    btn = () => {
        this.userid.value = "我是李晶爸"
    }
    btn1 = () => {
        this.refuserpass.current.type = "button"
        this.refuserpass.current.value = "按钮"
    }
    btn3 = () => {
        this.refs.refSon.sonFn("给我晶儿子")
    }
    btn4 = () => {
        this.refSon1.sonFn("给儿子一i")
    }
    btn5 = () => {
        this.refSon2.current.sonFn("给儿子一i2")
    }
    render() {
        return (
            <div>
                <h1>refs</h1>
                {/* 给refs属性赋值为字符串 */}
                <input type="text" ref="username" />
                <input type="button" value="测试" onClick={this.changeUsername} />
                <hr />
                <Son ref='refSon'></Son>
                <input type="button" value="自定义组件" onClick={this.btn3} />
                <hr />
                {/* 给ref属性赋值为回调函数 */}
                <input type="text" ref={(x) => { this.userid = x }} />
                <input type="button" value="测试01" onClick={this.btn} />
                <hr />
                {/* 3方式 */}
                <input type="text" ref={this.refuserpass} />
                <input type="button" value="测试01" onClick={this.btn1} />

                <hr />
                <Son ref={x => { this.refSon1 = x }}></Son>
                <input type="button" value="自定义组件05" onClick={this.btn4} />
                <hr />
                <hr />
                <Son ref={this.refSon2}></Son>
                <input type="button" value="自定义组件06" onClick={this.btn5} />
                <hr />
            </div>

        )
    }
}
